import React, { PureComponent } from 'react';
import { CenterPage, CenterBottom } from './style';
import OfflinePortal from './charts/OfflinePortal';
import Map from './charts/Map';
import { connect } from 'dva';
import { getStoreMap,chart2WeeksSales } from '../../services/index';
class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      mapList:{},
      cityName:'',
      offlinePortalData:{
        data1: [],
        xData: [],
      }
    };
  }
  componentDidMount(){
    this.props.onRef(this);
    this.getList();
    this.getWeeksSales();
  }
  async getList(){
    let res = await getStoreMap();
    if(!res){return}

    this.setState({
      mapList : res.result
    })
  }
  async getWeeksSales(option){
    let params = option || {};
    let res = await chart2WeeksSales(params);
    if(!res){return}
    this.setState({
      offlinePortalData : res.result
    })
  }
  getAllData=(e)=>{
    this.props.getAllData(e);
    // this.setState({cityName:e.name||'全部'})
    this.getWeeksSales({ city:e.name });
  }
  getAll(){  
    this.getAllData({name:''})
  }
  
  render() {
    const { mapList,offlinePortalData,cityName } =this.state;
    // console.log(mapList);
    return (
      <CenterPage>
        {/* <div className="viewAll" onClick={()=>this.getAll}> {cityName?cityName:'全部'}</div> */}
        <Map mapData={mapList} getAllData={this.getAllData}></Map>
        <CenterBottom>
          {/* <div className='detail-list'>
            {detailsList
              ? detailsList.map((item, index) => {
                  return (
                    <div className='detail-list-item' key={index}>
                      <img
                        src={require(`../../assets/images/center-details-data${
                          index + 1
                        }.png`)}
                        alt={item.title}
                      />
                      <div className='detail-item-text'>
                        <h3>{item.title}</h3>
                        <span>{item.number}</span>
                        <span className='unit'>{item.unit}</span>
                      </div>
                    </div>
                  );
                })
              : ''}
          </div> */}
          <div className='offline-portal-box'>
              <OfflinePortal
                offlinePortalData={offlinePortalData}
              />
          </div>
        </CenterBottom>
      </CenterPage>
    );
  }
}

const mapStateToProps = state => {
  return {
    detailsList: state.centerPage.detailsList,
    mapData: state.centerPage.mapData,
    offline: state.rightPage.offline,
  };
};

const mapStateToDispatch = dispatch => ({});

export default connect(mapStateToProps, mapStateToDispatch)(index);
